import Vue from "vue";

export default function dragCols (columns) {
    const draggingMap = {};
    columns.forEach(col => {
      draggingMap[col.key] = col.width;
    });
    const draggingState = Vue.observable(draggingMap);
    const ResizeableTitle = (h1) => {
      const props = h1.props;
      const children = h1.children;
      let thDom = null;
      const { key, ...restProps } = props;
      const col = columns.find(col => {
        const k = col.dataIndex || col.key;
        return k === key;
      });
      if (!col.width) {
        return <th {...restProps}>{children}</th>;
      }
      const onDrag = (x, y) => {
        draggingState[key] = 0;
        col.width = Math.max(x, 1);
      };
    
      const onDragstop = () => {
        draggingState[key] = thDom.getBoundingClientRect().width;
      };
      return (
        <th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class="resize-table-th">
          {children}
          <vue-draggable-resizable
            key={col.key}
            class="table-draggable-handle"
            w={10}
            x={draggingState[key] || col.width}
            z={1}
            axis="x"
            draggable={true}
            resizable={false}
            onDragging={onDrag}
            onDragstop={onDragstop}
          ></vue-draggable-resizable>
        </th>
      );
    };
    return ResizeableTitle
}